<template>
  <!-- 留言 -->
  <div class="leaveMessage">
    <el-input v-model="message" placeholder="请输入留言内容"></el-input>
    <el-button type="primary" @click="add(from,message)">发布</el-button>
  </div>

  <!-- 评论回复 -->
  <div class="reply-list">
    <div v-for="(item) in comments" :key="item.id" class="reply-list-item">
      <!--头像-->
      <div class="root-reply-avatar">
        <el-avatar :src="item.headImg"></el-avatar>
      </div>

      <div class="content-wrap">
        <!--层主信息-->
        <div class="user-info">
          <div class="user-name">{{ item.name }}</div>
        </div>

        <!--根评论内容-->
        <div class="root-reply">
          <div class="reply-content">{{ item.comment }}</div>
          <!--根评论内容-->
          <div class="reply-info">
            <span class="reply-time">{{ item.time }}</span>
            <span class="reply-btn" @click="add">回复</span>
          </div>
        </div>

        <!--子评论内容-->
        <div class="sub-reply-list" v-if="replyNumber">
          <div v-for="(reply, index) in item.reply" :key="index" class="sub-reply-item">
            <div class="sub-user-info">
              <span class="sub-reply-avatar">
                <el-image :src="reply.fromHeadImg" class="sub-reply-el-avatar"></el-image>
              </span>
              <span class="sub-reply-name">{{ reply.from }}</span>
            </div>
            <div class="sub-reply-content">{{ reply.comment }}</div>
            <div class="sub-reply-info">
              <span class="sub-reply-time">{{ reply.time }}</span>
              <span class="sub-reply-btn" @click="add">回复</span>
            </div>
          </div>
        </div>

        <!--评论框-->
        <div  class="reply-input" v-if="inputShow">
          <el-input v-model="message" placeholder="请输入留言内容"></el-input>
          <el-button type="primary" @click="add">发布</el-button>
        </div>
      </div>
    </div>

  </div>

</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {saveComment} from "../../api/comment";

// 留言评论功能
const message=ref()
const inputShow=ref(false)
const reply=reactive({
  from:'',
  comment:'',
  avatar:'',
  createTime:0
})
const add=()=>{
  //评论输入框切换显示
  inputShow.value=!inputShow.value

  const currentUser=localStorage.getItem('user_info')
  if(currentUser){
    reply.from=currentUser
  }
  reply.avatar=''
  reply.comment=message.value
  reply.createTime=new Date().getTime()

  saveComment(reply)
  message.value=''
}


// 评论数据
const comments=reactive([{
  name:'LeBron',
  id:19870621,
  headImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
  comment:'我发布一张新专辑Norman Fucking Rockwell,大家快来听啊',
  time:'2019年9月16日 18:43',
  inputShow:false,
  reply:[
    {
      from:'Taylor Swift',
      fromId:19891221,
      fromHeadImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg',
      to:'Lana Del Rey',
      toId:19870621,
      comment:'我很喜欢你的新专辑！！',
      time:'2019年9月16日 18:43',
      commentNum:1,
      like:15,
      inputShow:false
    }
  ]
}])

//子评论是否显示
const replyNumber=ref(false)
for(let i=0; i<comments.length;i++){
  if(comments[i].reply.length!==0){
     replyNumber.value=true
  }
}


</script>

<style>
.reply-list-item{
  display: flex;
  margin-top: 10px;
}
.root-reply-avatar{
  margin-right: 10px;
}
.user-info{
  margin-bottom: 5px;
}
.reply-time{
  padding-right: 5px;
}
.root-reply{
  margin-bottom: 10px;
}
.reply-content{
  margin-bottom: 5px;
}
.sub-reply-item{
  margin-bottom: 10px;
}
.sub-user-info{
  margin-bottom: 5px;
  display: flex;
}
.sub-reply-avatar{
  padding-right: 5px;
}
.sub-reply-content{
  margin-bottom: 5px;
}
.sub-reply-time{
  padding-right: 5px;
}
.reply-btn, .sub-reply-btn{
  color: #8c939d;
  cursor: pointer;
  padding: 2px 3px 4px 3px;
  border-radius: 3px;
}
.reply-btn:hover, .sub-reply-btn:hover{
  color: #3d6cf6;
}
.sub-reply-el-avatar{
  width: 24px;
  height: 24px;
  border-radius: 12px;
}

</style>